import styled from 'styled-components'
//这里定义一个div样式在引用的地方 就可以把div换成HeaderWrapper
//这里在使用vscode-styled-components语法提示时记住模板字符串一定要跟在紧跟在div或者其他标签名后面不然不生效
//并且在写完代码后面一定要跟';'

import sprite01 from '@/assets/img/sprite_01.png'
export const HeaderWrapper = styled.div`
height:75px;
background-color:#242424;
font-size:14px;
.content{
    height: 70px;
    display:flex;
    justify-content:space-between;
}
.divider{
    height:5px ;
    background-color:#C20C0C;
}
`
export const HeaderLeft = styled.div`
display:flex;
.logo{
    display:block;
    width:176px;
    height: 69px;
    background-position: 0  0;
    text-indent:-99999px;
}
.select-list{
    display:flex;
    line-height:70px;
    .select-itme{
       position:relative;
    a {
        display:flex;
        padding:0 20px;
        color:#ccc;
    }
    //hot icon
    :last-of-type a{
        position:relative;
        ::after{
            position:absolute;
            content:' ';
            width:28px;
            height: 19px;
            background-image:url(${sprite01});
            background-position: -190px 0;
            top:20px;
            right:-15px;
        }
    } 
    /* a.active就是当a并且a上面有属性active时触发样式 */
    &:hover a, a.active{
        color:#fff;
        background:#000;
        text-decoration:none;
    }
    /* 这里的active是NavLink带的属性 是选中时默认添加的类名 */
    .active .icon{
        position:absolute;
        display:inline-block;
        width:12px;
        height:7px;
        bottom:-1px;
        left:50%;
        transform:translate(-50%,0);
        background-position: -226px 0;
    }
}
}
`
export const HeaderRight = styled.div`
         display:flex;
         align-items:center;
         color:#ccc;
         font-size:12px;
         .search{
             width:150px;
             height:32px;
             border-radius:16px;
         }
         input{
             &::placeholder{
                 font-size:12px;
             }
         }
         .center{
             width:90px;
             height:32px;
             line-height:32px;
             text-align:center;
             border:1px solid #666;
             border-radius:16px;
             margin:0 16px;
             background-color:transparent;
         }
         .login{
            display: block;
            width: 28px;
            color: #787878;
            cursor: pointer;
            line-height:70px;
            display:${props => props.isLogin === 200 ? "none" : "block"};
            &:hover{
                color:#999;
            }
         }
         .logined{
             width:30px;
             height:30px;
             position:relative;
             display:${props => props.isLogin === 200 ? "block" : "none"};
            .portrait{
             img{
                width:30px;
                height:30px;
                border-radius:50%;
             }
          }
          .unread{
                      position:absolute;
                      top:-6px;
                      left:28px;
                      width:12px;
                      height:12px;
                      border-radius:50%;
                      background-color: #BF0C0C;
                      display:flex;
                      justify-content: center;
                      align-items:center;
          }
          .loginedList{
              display:none;
              position:absolute;
              bottom:-224px;
              left:50%;
              transform:translateX(-50%);
              z-index:999;
              width:180px;
              background-color:#322F2E;
              border-radius:6px;
              font-size:12px;
              color:#ccc;
              .item{
                  width:100%;
                  height:30px;
                  text-align:center;
                  line-height:30px;
                  display:flex;
                  justify-content:center;
                  align-items:center;
                  &:hover{
                      background-color: #563131;
                      border-radius:6px;
                  }
                  .anticon{
                      font-size:14px;
                  }
                  p{
                      margin-left:10px;
                      margin-top:1px;
                  }
              }
              .arrows{
                  position:absolute;
                  top:-13px;
                  left:50%;
                  transform:translateX(-50%);
                  z-index:999;
                  height:20px;
                  background-color:rgba(0,0,0,0);
                  i{
                      display:inline-block;
                      width:0;
                      height:0;
                      border-bottom: 10px solid #322F2E;
				      border-top:10px solid transparent;    /* 设置透明背景色 */
				      border-left:10px solid transparent;
				      border-right:10px solid transparent;
                      margin-top:-7px;
                  }
              }
              .exit,.set{
                  border-top:1px solid #000;
              }
              .me-info{
                  position:relative;
                  i{
                      position:absolute;
                      top:2px;
                      left:131px;
                      width:12px;
                      height:12px;
                      border-radius:50%;
                      background-color: #BF0C0C;
                      display:flex;
                      justify-content: center;
                      align-items:center;
                  }
              }
          }
         }
         .logined:hover .loginedList{
              display:block;
          } 
`